<template>
    <el-cascader v-model="model"
        :options="options"
        size="mini"
        :props="optionProps"
        @change="handleChange">
        <template slot-scope="{ node, data }">
            <span>{{ data[optionProps.label] }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </template>
        </el-cascader>
</template>

<script>
export default {
  name: 'yc-cascader',
  data () {
    return {

    }
  },
  props: {
    value: {
      type: [ String, Array, Object, File ]
    },
    options: Array,
    optionProps: {
      type: Object,
      default: function () {
        return {
          value: 'value',
          label: 'label',
          children: 'children'
        }
      }
    }
  },
  computed: {
    model: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    handleChange (value) {
      this.$emit('input', value)
      this.$emit('change', value)
    }
  }
}
</script>
